<template>
  <div class="container"
       v-if="addressListData">
    <!--   地址管理    -->
    <div v-if="addressListData.length>0">
      <ul class="list">
        <li class="list-item white-bg"
            v-for="(item,index) in addressListData"
            :key="index">
          <div class="info"
               @click="_selectAddress(item)"
               v-if='!item.isEdit'>
            <div>
              <span> 收货人</span>

              <text>{{item.DianHuaHao}}</text>

            </div>
            <div>

              <text>{{item.LianXiRen}}</text>

            </div>
          </div>
          <div class=" isEdit"
               v-else>
            <div>
              <span>手机号 </span>
              <input type="number"

                     v-model='userPhone'>

            </div>
              <div>
                <span>收货人 </span>
                <input type="text"

                     v-model='userName'>

            </div>
              </div>
              <div class="address"
                   @click="_selectAddress(item)">
                <span>
                  地址
                </span> {{item.Dizhi}}
              </div>
              <div class="operating">
                注：本次修改用于提交订单，下次进入将恢复原有设值,非编辑点击地址区域即可选中返回
                <div class="font-28"
                     :class="[item.isEdit?'confirm-btn':'']"
                     @click="addressEdit(item)">
                  {{item.isEdit?'确定':'修改'}}
                </div>
              </div>
        </li>

      </ul>

    </div>

  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      addressListData: null,
      comeFrom: null,
      isVip: false,
      userName: null,
      userPhone: null

    }
  },
  computed: {
    store () {
      return this.$store.state
    }
  },
  methods: {
    async _init () {
      let res = this.$wx.getStore('addressList')
      for (let key of res) {
        key.isEdit = false
      }
      this.addressListData = res
      console.log(this.addressListData)
    },

    /**
     * 修改地址地址
     * @param id
     * @private
     */
    async addressEdit (item) {
      if (item.isEdit) {
        item.LianXiRen = this.userName
        item.DianHuaHao = this.userPhone
      } else {
        this.userName = item.LianXiRen
        this.userPhone = item.DianHuaHao
      }
      item.isEdit = !item.isEdit
    },
    _selectAddress (item) {
      if (!item.isEdit) {
        this.setAddress(item)
        this.$wx.navigator(1)
      }
    },
    goTo (url) {
      this.$wx.navigator(url)
    },
    ...mapMutations({
      setAddress: 'SET_ADDRESS'

    })
  },
  onShow () {
    this._init()
  },
  onShareAppMessage: function () {
    return this.store.oShareMessage()
  }
}
</script>

<style lang="scss" type="text/scss">
@import '../../common/scss/base.scss';

.list {
  padding-bottom: 148px;
  .list-item {
    margin-top: 20px;
    background: #fff;
    .info {
      display: flex;
      padding: 0 30px;
      padding-top: 31px;
      @include fontSize(28);
      @include fjc;
      height: 60px;
      > div:first-child {
        display: flex;
        min-width: 250px;
        span {
          min-width: 99px;
          margin-right: 10px;
          display: flex;
          align-self: flex-start;
          justify-content: flex-end;
          white-space: nowrap;
          &::after {
            content: ':';
          }
        }
      }
      > div {
        color: #666666;
        @include fjc(flex-start);
        text {
          font-weight: 700;

          color: #000000;
        }
      }
      > div:nth-child(2) {
        text {
          font-weight: 700;
        }
      }
    }
    .isEdit {
      padding: 0 30px;
      padding-top:17px;
      > div {
        width: 100% !important;
        @include fjc(flex-start);
        @include fontSize(28);
        height: 70px;
        span {
          min-width: 99px;
          margin-right: 10px;
          display: flex;
         
          justify-content: flex-end;
          white-space: nowrap;
          &::after {
            content: ':';
          }
        }
        input {
          height: 60px;
          padding: 0 20px;
          @include border-all(#e5e5e5);
          width: 400px;
        }
      }
      >div:first-child{
        margin-bottom:12px;
      }
    }
    .address {
      display: flex;

      align-items: center;
      color: #111111;
      padding: 25px 30px 31px;
      @include fontSize(28);
      span {
        min-width: 99px;
        margin-right: 10px;
        display: flex;
        align-self: flex-start;
        justify-content: flex-end;
        white-space: nowrap;
        &::after {
          content: ':';
        }
      }
    }
  }
}

/**
      操作
       */
.operating {
  padding: 0 30px;
  display: flex;
  justify-content: flex-end;
  @include border-top(#e5e5e5);
  @include fjc;
  @include fontSize(22);
  @include color999;
  padding: 20px;
  > div {
    @include fontSize(28);
    @include border-all(#e5e5e5);
    @include wh(150, 60);
    @include fjc(center);
    color: #666666;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
  }
  > .confirm-btn {
    background: $primaryColor;

    color: #fff;
  }
}

.btn-address {
  padding: 20px 30px;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  > div {
    height: 88px;
    border-radius: 8px;
    @include fjc(center);
    @include fontSize(34);
    color: #ffffff;
  }
}
</style>
